<template>
  <div>
    <el-table
      v-loadmore="myLoad"
      size="large"
      :data="data.ac"
      max-height="530"
      style="width: 100%"
    >
      <template #empty>
        <el-skeleton v-if="isLoading" :rows="5" animated />
        <span v-else>暂无数据</span>
      </template>
      <el-table-column
        :fixed="isPhone"
        label="发布时间"
        sortable
        prop="createdAt"
      >
        <template #default="scope">
          {{ dayjs(scope.row.createdAt).format('YYYY-MM-DD') }}
        </template>
      </el-table-column>
      <el-table-column
        :fixed="isPhone"
        label="更新时间"
        sortable
        prop="updatedAt"
      >
        <template #default="scope">
          <span v-if="scope.row.updatedAt != null">{{
            scope.row.updatedAt
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        min-width="100"
        label="技术标签"
        prop="achievementType.name"
      >
        <template #default="scope">
          <el-tag class="ml-2" type="success"
            >{{ scope.row.achievementType.name }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column min-width="300" label="成果名称" prop="title" />
      <el-table-column min-width="150" :fixed="isPhone" align="center">
        <template #header>
          <div style="display: flex; align-items: center">
            <el-select
              size="small"
              style="width: 40%"
              @change="myChange"
              v-model="value"
              clearable
              placeholder="全部成果"
            >
              <el-option
                v-for="(item, index) in data.tagType"
                :key="item.index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-input
              :prefix-icon="Search"
              v-model="data.search"
              @keyup.enter.native="mySearch"
              size="small"
              placeholder="Type to search"
            />
          </div>
        </template>
        <template #default="scope" v-if="isMyself">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >编辑
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除
          </el-button>
          <el-button
            size="small"
            @click="handleShow(scope.row.achievementlink, scope.row.attachment)"
            >查看
          </el-button>
        </template>
        <template #default="scope" v-else>
          <el-button
            size="small"
            @click="handleShow(scope.row.achievementlink, scope.row.attachment)"
            >查看
          </el-button>
        </template>
      </el-table-column>
      <template #append>
        <p v-if="isLoading">
          <el-divider content-position="center">加载中...</el-divider>
        </p>
        <p v-if="isNot">
          <el-divider content-position="center">到底了</el-divider>
        </p>
      </template>
    </el-table>
    <el-dialog
      v-model="currentArticl.centerDialogVisible"
      title="确认删除这个成果吗 ?"
      width="30%"
      :before-close="handleClose"
    >
      <div>{{ currentArticl.title }}</div>
      <br /><br />
      <span slot="footer" class="dialog-footer">
        <el-button @click="currentArticl.centerDialogVisible = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="ConfirmDel">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup>
import { inject, onMounted, reactive, ref } from 'vue'
import { getTouristAchievement, searchTouristAchievement } from '@/api/tourist'
import axios from '../../utils/Axios'
import dayjs from 'dayjs'
import { Search } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from '@/store'
import { ElMessage } from 'element-plus'
import Base from '@/api/base.js'

const userStore = useStore()
const route = useRoute()
const router = useRouter()
// const emit = defineEmits(['changeIndex'])
const isPhone = inject('isPhone')
const isLoading = ref(true)
const isMyself = inject('isMyself')
const isNot = ref(false)
const value = ref('')
const data = reactive({
  ac: [],
  acType: [],
  tagType: [],
  search: '',
  beg: 1,
  end: 10,
  index: 0,
  yeshu: 1,
  deleteId: 0,
})
// emit('changeIndex','2')
onMounted(() => {})
getArticle()
const currentArticl = reactive({
  centerDialogVisible: false,
  title: '',
  id: null,
})

function getArticle() {
  isLoading.value = true
  isNot.value = false
  getTouristAchievement({
    beg: data.beg,
    end: data.end,
    index: data.index,
    id: route.params.id || userStore.userInfo.id,
  }).then(res => {
    data.ac = res.data.ac
    data.acType = res.data.acType
    data.tagType = data.acType.map(item => {
      return { label: item.name, value: item.id + '' }
    })
    isLoading.value = false
    if (0 < data.ac.length && data.ac.length < data.yeshu * 10) {
      isNot.value = true
    }
  })
}

// const filterTableData = computed(() =>
//     data.article.filter(
//         (item) =>
//             !data.search ||
//             item.name.toLowerCase().includes(data.search.toLowerCase())
//     )
// )

const handleEdit = (index, row) => {
  // console.log(index, row.id)
  router.push({
    path: '/editAchivement',
    query: {
      id: row.id,
    },
  })
}
const handleShow = (a, b) => {
  window.open(a == '' ? b : a)
}
const handleDelete = (index, row) => {
  data.deleteId = index
  currentArticl.title = row.title
  currentArticl.id = row.id
  currentArticl.centerDialogVisible = true
}

function ConfirmDel() {
  axios.delete(`${Base.delUserAchievement}/${currentArticl.id}`).then(res => {
    if (res.data.success) {
      currentArticl.centerDialogVisible = false
      data.ac.splice(data.deleteId, 1)
    } else {
      currentArticl.centerDialogVisible = false
      ElMessage({
        message: '删除失败',
        type: 'error',
      })
    }
  })
  currentArticl.centerDialogVisible = false
}

function myChange(val) {
  if (val == '') {
    val = 0
  }
  data.yeshu = 1
  data.index = val
  getArticle()
}

function mySearch() {
  // console.log('hello')
  if (data.search == '') {
    ElMessage({
      showClose: true,
      message: '请输入关键字',
      type: 'error',
    })
  } else {
    getSearchData()
  }
}

function getSearchData() {
  isLoading.value = true
  isNot.value = false
  searchTouristAchievement({
    value: data.search,
    id: route.params.id || userStore.userInfo.id,
    // route.params.id || store.state.userInfo.id
  }).then(res => {
    data.ac = res.data
    isLoading.value = false
    if (0 < data.ac.length && data.ac.length < data.yeshu * 10) {
      isNot.value = true
    }
  })
}

const myLoad = () => {
  if (!isNot.value) {
    if (data.search == '') {
      data.end += 10
      data.yeshu++
      getArticle()
    } else {
      data.end += 10
      data.yeshu++
      getSearchData()
    }
  }
}

const handleClose = (done) => {
  currentArticl.centerDialogVisible = false
  done()
}
</script>

<style scoped></style>
